<template>
  <div class="main">
    <el-container>
      <el-header>
        <div class="header">
          <div class="header-title">
            京师壹心心理云平台（测评系统-运营管理端）
          </div>
          <div class="header-user">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                您好，{{name}} <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="modify" icon="el-icon-key">修改密码</el-dropdown-item>
                <el-dropdown-item command="exit" icon="el-icon-switch-button">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <el-menu :default-active="this.menu" router unique-opened class="el-menu-vertical-demo" @select="handleOpen">
            <template v-for="item in this.menuList">
              <el-submenu v-if="item.childrenList" :index="item.id" :key="item.id" class="iconTitle">
                <template slot="title">
                  <div :class="item.icon"></div>
                  <span>{{item.name}}</span>
                </template>
                <el-menu-item-group v-for="(item1, index1) in item.childrenList" :key="index1">
                  <el-menu-item :index="item1.id">{{item1.name}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item v-else :index="item.id" :key="item.id" class="iconTitle">
                <div :class="item.icon"></div>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" width="30%" :visible.sync="dialogFormVisible" :close-on-click-modal='false'>
      <el-form :model="form" label-width="80px">
         <el-form-item label="旧密码" prop="original_password">
          <el-input type="password" v-model="form.original_password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_password">
          <el-input type="password" v-model="form.new_password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="new_password">
          <el-input type="password" v-model="form.new_password2" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkFn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {APIGETMENU, APICHANGEPASSWORD} from '@/common/api.js'
export default {
  data () {
    return {
      menuList: [],
      menu: '',
      name: '',
      dialogFormVisible: false,
      form: {
        original_password: '',
        new_password: '',
        new_password2: ''
      }
    }
  },
  created () {
    this.getMenu() // 权限
    this.menuFn()
    this.nameFn()
    this.isPasswordFn()
  },
  methods: {
    getMenu () {
      APIGETMENU().then((res) => {
        sessionStorage.setItem('list', res.data)
        if (res.data.includes('index')) {
          var menu5 = { id: 'query', name: '测评查询', icon: 'el-icon-search' }
          this.menuList.push(menu5)
        }
        if (res.data.includes('userManagement')) {
          const menuUsersManagement = { id: 'users_management', name: '用户账号管理', icon: 'el-icon-more-outline' }
          this.menuList.push(menuUsersManagement)
        }
        if (res.data.includes('school')) {
          var menu1 = {id: 'home', name: '学校管理', icon: 'el-icon-chat-line-round', childrenList: []}
          this.menuList.push(menu1)
          if (res.data.includes('schoolList')) {
            var menu1C1 = {id: 'school', name: '学校信息'}
            menu1.childrenList.push(menu1C1)
          }
          if (res.data.includes('studentList')) {
            var menu1C4 = {id: 'student', name: '学生管理'}
            menu1.childrenList.push(menu1C4)
          }
          if (res.data.includes('evaluationList')) {
            var menu1C2 = {id: 'plan', name: '平台计划'}
            menu1.childrenList.push(menu1C2)
          }
          if (res.data.includes('schoolEvaluation')) {
            var menu1C3 = {id: 'schoolPlan', name: '学校计划'}
            menu1.childrenList.push(menu1C3)
          }
          if (res.data.includes('report')) {
            var menu1C5 = {id: 'checkReport', name: '报告查看'}
            menu1.childrenList.push(menu1C5)
          }
          if (res.data.includes('earlyWaring')) {
            var menu1C7 = {id: 'warning', name: '预警管理'}
            menu1.childrenList.push(menu1C7)
          }
          if (res.data.includes('crisis')) {
            var menu1C6 = {id: 'crisis', name: '危机管理'}
            menu1.childrenList.push(menu1C6)
          }
        }
        if (res.data.includes('gauge')) {
          var menu6 = { id: 'inventoryManagement', name: '量表管理', icon: 'el-icon-s-data' }
          this.menuList.push(menu6)
        }
        if (res.data.includes('permission')) {
          var menu2 = { id: 'permissions', name: '人员权限', icon: 'el-icon-s-custom' }
          this.menuList.push(menu2)
        }
        if (res.data.includes('operationLog')) {
          var menu3 = { id: 'operationLog', name: '操作日志', icon: 'el-icon-s-order' }
          this.menuList.push(menu3)
        }
        if (res.data.includes('system')) {
          var menu4 = { id: 'operatingDiary', name: '系统设置', icon: 'el-icon-setting' }
          this.menuList.push(menu4)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    selectFn (id) {
      this.$cookies.set('menu', id)
    },
    handleOpen (key, keyPath) {
      this.$cookies.set('menu', key)
    },
    menuFn () {
      if (this.$cookies.get('menu')) {
        this.menu = this.$cookies.get('menu')
      } else {
        this.menu = 'school'
      }
    },
    nameFn () {
      if (this.$cookies.get('name')) {
        this.name = this.$cookies.get('name')
      } else {
        this.name = 'admin'
      }
    },
    exitLogin () {
      sessionStorage.setItem('token', '')
      this.$router.push({path: '/'})
    },
    handleCommand (command) {
      if (command === 'modify') {
        this.form = {}
        this.dialogFormVisible = true
      } else if (command === 'exit') {
        this.exitLogin()
      }
    },
    checkFn () {
      // 修改密码
      if (this.form.original_password === '') {
        this.$message.warning('旧密码不能为空')
        return false
      }
      if (this.form.new_password === '') {
        this.$message.warning('新密码不能为空')
        return false
      }
      if (this.form.new_password2 === '') {
        this.$message.warning('确定密码不能为空')
        return false
      }
      if (this.form.new_password2 !== this.form.new_password) {
        this.$message.warning('两次密码输入不匹配，请重新输入')
        return false
      }
      this.changePassword()
    },
    changePassword () {
      APICHANGEPASSWORD({
        original_password: this.form.original_password,
        password: this.form.new_password
      }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.dialogFormVisible = false
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    isPasswordFn () {
      if (sessionStorage.getItem('password_complexity_status') == 0) {//eslint-disable-line
        this.$confirm('初始密码过于简单，为了系统安全，必须先修改密码，再使用。', '提示', {
          confirmButtonText: '去修改',
          cancelButtonText: '忽略',
          type: 'warning'
        }).then(() => {
          this.form = {}
          this.dialogFormVisible = true
        }).catch(() => {
          console.log('取消后的操作')
        })
      }
      if (sessionStorage.getItem('password_expiration_status') == 0) {//eslint-disable-line
        this.$confirm('您已长时间未修改密码，为了您的使用安全，必须定期修改密码。', '提示', {
          confirmButtonText: '去修改',
          cancelButtonText: '忽略',
          type: 'warning'
        }).then(() => {
          this.form = {}
          this.dialogFormVisible = true
        }).catch(() => {
          console.log('取消后的操作')
        })
      }
    }
  }
}
</script>
<style>
.main{
  width: 100%;
  height: 100%;
}
.el-header{
  border-bottom: 1px #d8d8d8 solid;
}
.el-container{
  height :100%;
  width: 100%;
}
.el-aside{
  border-right: 1px #d8d8d8 solid;
  text-align: left;
}
.el-main{
  background-color :#ffffff;
}
.header{
  overflow: hidden;
  height: 60px;
  line-height :60px;
  border-bottom: 1px solid #cccccc;
}
.header-title{
  float: left;
  text-indent: 20px;
}
.header-title img{
  width: 120px;
  vertical-align: middle;
}
.header-user{
  width :150px;
  float :right;
}
.header-user-title{
  float :left;
}
.header-user-exit{
  float :right;
}
.header-user-exit-btn{
  width :60px;
  height :30px;
  font-size: 14px;
  background-color :rgba(0,0,0,0);
  border :1px solid #409EFF;
  border-radius :4px;
}
.header-user-exit-btn:hover{
  background-color :#ffffff;
  color :#303133;
}
</style>
